
<template>
    <div class="user-music-card" :class="[active==songListInfo.id?'active':'']" @click="changePlayList(songListInfo.id)">
        <div class="avater">
            <el-image :src="songListInfo.coverImgUrl"></el-image>
        </div>
        <div class="list-info">
            <p>{{songListInfo.name}}</p>
            <p>{{songListInfo.trackCount}}首</p>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import emitter from '../../eventbus/index'
export default defineComponent({
     name: "userMusic-card",
    emits: ["checkPlayList"],
    setup (props,context) {
        
        console.log("active1",props.active);
        
        const changePlayList = (id)=>{


            
            emitter.emit("checkPlayList",id)
            
        }

        return {
            changePlayList
            
        }
    },
    
    props:{
        songListInfo:{
            type:Object
        },
       active:{
           type:Number
       }
    }
})
</script>
 
<style lang = "scss" scoped>
    @import '../../assets/css/user-music.scss'
</style>